<template>
    <view class="book-page-body">
        <view class="" style="position: relative;">
            <image :style="{width:(imgInfo.nW?imgInfo.nW:imgInfo.w)+'px',height:(imgInfo.nH?imgInfo.nH:imgInfo.h)+'px'}" :src="imgInfo.src"></image>
            <view v-for="(item,idx) in imgInfo.items" :key="idx+''" >
                <view @click="handleChange(item,idx)" class="num-box" :style="{
                    width:(item.nW?item.nW:item.w)+'px',
                    height:(item.nH?item.nH:item.h)+'px',
                    top:(item.nY?item.nY:item.y)+'px',
                    left:(item.nX?item.nX:item.x)+'px',
                    zIndex:1
                    }"></view>
                <view class="num-box num-answer" :idx="idx" :style="{
                    width:(item.numBox.nW?item.numBox.nW:item.numBox.w)+'px',
                    height:(item.numBox.nH?item.numBox.nH:item.numBox.h)+'px',
                    top:(item.numBox.nY?item.numBox.nY:item.numBox.y)+'px',
                    left:(item.numBox.nX?item.numBox.nX:item.numBox.x)+'px',
                    lineHeight: (item.numBox.nH?item.numBox.nH:item.numBox.h)+'px',
                    display:'none',
                    color:item.color,
                    zIndex:0,
                    }">{{item.num}}</view>
            </view>
            
            
            
            <view class="reset">
                <button @tap="handleReset()" type="primary">重置</button>
            </view>
        </view>
    </view>
</template>

<script>
    import tips from '@/core/tips.js'
    export default{
        data(){
            return {
                answer:0,
                imgInfo:{
                    w:637,
                    h:441,
                    src:require( '@/static/demo/number.png'),
                    items:[
                        {
                            num:4,
                            color:'red',
                            x:15,
                            y:122,
                            w:287,
                            h:141,
                            numBox:{
                                x:246,
                                y:204,
                                w:60,
                                h:60
                            },                            
                        },
                        {
                            num:1,
                            color:'red',
                            x:334,
                            y:121,
                            w:287,
                            h:141,
                            numBox:{
                                x:562,
                                y:206,
                                w:60,
                                h:60
                            },                            
                        },
                        {
                            num:3,
                            color:'red',
                            x:15,
                            y:288,
                            w:287,
                            h:141,
                            numBox:{
                                x:245,
                                y:369,
                                w:60,
                                h:60
                            },                            
                        },
                        {
                            num:2,
                            color:'red',
                            x:334,
                            y:288,
                            w:287,
                            h:141,
                            numBox:{
                                x:562,
                                y:369,
                                w:60,
                                h:60
                            },                            
                        }
                    ],
                }
            }
        },
        onLoad() {
            window.addEventListener('orientationchange',(event)=>{
                this.setPosition(event.currentTarget.innerWidth,event.currentTarget.innerHeight)
            })
            this.setPosition(window.screen.width,window.screen.height)
        },
        mounted() {
            if(window.screen.width < window.screen.height){
        
                document.querySelector('.reset').classList.remove('ladscape')
            }else{
                document.querySelector('.reset').classList.add('ladscape')
            }
        },
        // 2 targe: x:326, y:148,
        methods:{
            setPosition(width,height){
                if(width < height){ //竖屏
                    this.scale = width/this.imgInfo.w
                    this.imgInfo.nW = width
                    this.imgInfo.nH = this.imgInfo.h * this.scale
                    if(document.querySelector('.reset')){
                        document.querySelector('.reset').classList.remove('ladscape')
                    }
                }else{ //横屏
                    this.scale = height/this.imgInfo.h
                    this.imgInfo.nH = height
                    this.imgInfo.nW = this.imgInfo.w * this.scale
                    if(document.querySelector('.reset')){
                        document.querySelector('.reset').classList.add('ladscape')
                    }
                }
                this.imgInfo.items.forEach(item=>{
                    item.nW = item.w * this.scale
                    item.nH = item.h * this.scale
                    item.nY = item.y * this.scale
                    item.nX = item.x * this.scale
                    item.numBox.nW = item.numBox.w * this.scale
                    item.numBox.nH = item.numBox.h * this.scale
                    item.numBox.nY = item.numBox.y * this.scale
                    item.numBox.nX = item.numBox.x * this.scale
                })
            },
            handleReset(){
                this.answer = 0;
                this.imgInfo.items.forEach((item,idx)=>{
                    item.success = false,
                    document.querySelector('.num-answer[idx="'+idx+'"]').style.display='none'
                })
                
            },
            handleChange(item,idx){
                if(item.success){
                    return;
                }
                item.success =(item.num-1) == this.answer
                if(item.success){
                    document.querySelector('.num-answer[idx="'+idx+'"]').style.display=''
                    this.answer = item.num
                    this.handleComplate()
                }else{
                    tips.error()
                }
            },
            handleComplate(){
                let complate= true;
                this.imgInfo.items.forEach(row=>{
                    if(!row.success){
                        complate=false
                    }
                })
                if(complate){
                    tips.complate()
                }else{
                    tips.success()
                }
            }
        }
    }
</script>

<style scoped>
    .book-page-body{
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    
     }
     .reset{
         text-align: center;
     }
     .reset.ladscape{
         position: absolute;
         bottom: 0;
         right: -65px;
     }
     .reset uni-button{
         display: inline-block;
     }
     .num-box{
         position: absolute;
         text-align: center;
         /* border: 1px solid red; */
     }
</style>